Revise README for FocalPointPicker component to use object-position#77722
Revise README for FocalPointPicker component to use object-position#77722andreawetzel wants to merge 1 commit intoWordPress:trunkfrom
Conversation
Updated the focal point picker's README to clarify the component's purpose both for background images and aspect ratio cropped images. Update example code to use `object-position`
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
ciampo
left a comment
ciampo
left a comment
There was a problem hiding this comment.
Thank you @andreawetzel for working on this.
the CSS example from this README is no longer in use on core blocks such as the cover block.
It seems like the above sentence is not accurate: the Cover block uses both, depending on the rendered element:
objectPositionwhen the media is an<img>/<video>element;backgroundPositionwhen the media is rendered as a<div>withbackground-image(example).
We should consider rewording the README's first paragraph so it doesn't read like object-position replaces background-position. Both remain valid targets, and the choice depends on whether the consumer renders the media via CSS background or via an <img>/<video> element. A short note like:
The output value can be applied to either CSS `background-position` (for elements with `background-image`) or `object-position` (for `<img>` / `<video>` elements rendered with `object-fit: cover`).
…keeps both use cases visible.
Optionally, a second example showing the background-image path would map cleanly onto how Cover renders today.
| onChange={ setFocalPoint } | ||
| /> | ||
| <div style={ style } /> | ||
| <img src={ url } style={ style } /> |
There was a problem hiding this comment.
I don't think the current example snippet will work as expected, we need to set object-fit and also ideally a target ratio (see https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/object-position)
const style = {
width: '100%',
aspectRatio: '16 / 9',
objectFit: 'cover',
objectPosition: `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`,
};
return (
<>
<FocalPointPicker
url={ url }
value={ focalPoint }
onDragStart={ setFocalPoint }
onDrag={ setFocalPoint }
onChange={ setFocalPoint }
/>
<img src={ url } alt="" style={ style } />
</>
);| - Example focal point picker value: `{ x: 0.5, y: 0.1 }` | ||
| - Corresponding CSS: `background-position: 50% 10%;` | ||
| - Corresponding CSS: `object-position: 50% 10%` |
There was a problem hiding this comment.
Let's add trailing semi-columns for both bullet points.
There was a problem hiding this comment.
Whatever changes we end up making to the README, we should always keep them in sync with the JSDoc in index.tsx
3 participants
object-positionWhat?
The Focal Point Picker's use has expanded beyond background images and the CSS example from this README is no longer in use on core blocks such as the cover block.